<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <el-main>
        <!-- 添加按钮 -->
        <el-button type="primary">添加角色</el-button>
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="date" label="" type="expand">
            <template slot-scope="{ row }">
              <!-- {{ row }} -->
              <!-- 侧边展开 -->
              <el-row v-for="item in row.children" :key="item.id">
                <el-col :span="8">
                  <div class="grid-content bg-purple-dark">
                    <el-tag
                      :closable="true"
                      type=""
                      @close="del(item.id, row.id)"
                    >
                      {{ item.authName }}
                    </el-tag>
                  </div></el-col
                >
                <el-col :span="16"
                  ><div class="grid-content bg-purple">
                    <el-row v-for="(aw, index) in item.children" :key="aw.id">
                      <el-col :span="6"
                        ><div class="grid-content bg-purple">
                          <el-tag
                            :closable="true"
                            type="success"
                            @close="del(aw.id, row.id)"
                          >
                            {{ aw.authName }}
                          </el-tag>
                        </div></el-col
                      >
                      <el-col :span="18">
                        <div class="grid-content bg-purple">
                          <el-tag
                            v-for="tag in item.children[index].children"
                            :key="tag.id"
                            :closable="true"
                            type="warning"
                            @close="del(tag.id, row.id)"
                          >
                            {{ tag.authName }}
                          </el-tag>
                        </div></el-col
                      >
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="">
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="roleName" label="角色名称"> </el-table-column>
          <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="small"
                @click="handleClick(row)"
                >编辑</el-button
              >
              <el-button icon="el-icon-delete" type="danger" size="small"
                >删除</el-button
              >
              <el-button
                icon="el-icon-setting"
                type="warning"
                size="small"
                @click="fpqx(row.id)"
                >分配权限</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="分配权限" :visible.sync="dialogFormVisible">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            ref="tree"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            @check="handleNodeClick"
          >
          </el-tree>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="fpqxx">确 定</el-button>
          </div>
        </el-dialog>
        {{ rids }}
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { huoQuRoles, huoShuQuRoles, shanChuQuRoles, fenPeiQuRoles } from '@/api/roles'
export default {
  name: 'RolesA',
  data () {
    return {
      dialogFormVisible: false,
      list: [],
      data: [],
      roleId: '',
      rids: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      }
    }
  },
  created () {
    this.fnf()
  },
  computed: {
  },
  methods: {
    handleClick (row) {
      console.log(row);
    },
    async fnf () {
      const res = await huoQuRoles()
      console.log(res);
      this.list = res.data
    },
    async fpqx (id) {
      this.dialogFormVisible = true
      const res = await huoShuQuRoles()
      console.log(res);
      this.data = res.data
      this.roleId = id

    },
    del (perId, roleId) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await shanChuQuRoles({ perId, roleId })
        this.$message({
          type: 'success',
          message: '删除成功!',

        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        this.fnf()
      });



    },
    //获取rids
    handleNodeClick () {
      this.rids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
    },
    async fpqxx () {
      this.dialogFormVisible = false
      await fenPeiQuRoles()
    }

  }

}

</script>
<style lang='less'  scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #ffffff;
}
</style>
